<template>
  <div class="container vhu1">
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="text"
        v-if="isBack"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.jumpPage }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="border" v-if="isBack"></div>
      <!-- 表单区域 -->
      <el-row>
        <!-- 添加按钮框 -->
        <el-button type="success" class="right_btn" @click="add"
          >新增按钮</el-button
        >
        <a v-if="isBack" href="javascript:;" class="span" @click="backFn"
          >←返回学科</a
        >
        <el-form :inline="true" :model="queryinfo">
          <el-form-item label="目录名称">
            <el-input v-model="queryinfo.tagName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="queryinfo.state"
              :clearable="true"
              placeholder="请选择"
            >
              <el-option value="0" label="禁用"></el-option>
              <el-option value="1" label="启用"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="eliminate">清除</el-button>
            <el-button type="primary" @click="getListSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 穿梭提示框 -->
      <el-row>
        <el-alert type="info" :closable="false"
          >总共有{{ this.title }}条数据</el-alert
        >
      </el-row>

      <!-- 数据列表 -->
      <el-table :data="list.items" style="width: 100%" width="30px">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="100"
        ></el-table-column>
        <el-table-column prop="tagName" label="标签名" width="180">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{
              scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
            }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-link
              prop="state"
              v-if="scope.row.state == 1"
              type="primary"
              :underline="false"
              >已启用</el-link
            >
            <el-link prop="state" v-else type="primary" :underline="false"
              >已禁用</el-link
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.state == 0"
              class="el-link"
              type="primary"
              :underline="false"
              @click="scope.row.state = 1"
              >启用</el-link
            >
            <el-link
              v-else
              class="el-link"
              type="primary"
              :underline="false"
              @click="scope.row.state = 0"
              >禁用</el-link
            >
            <el-link
              :disabled="scope.row.state == 1 ? true : false"
              class="el-link"
              type="primary"
              :underline="false"
              @click="updateFn(scope.row)"
              >修改</el-link
            >
            <!-- 把数据带过去 -->
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @onConfirm="tagDelete(true, scope.row.id)"
              @onCancel="tagDelete(false)"
            >
              <!-- <el-button slot="reference">删除</el-button> -->
              <el-link
                slot="reference"
                :disabled="scope.row.state == 1 ? true : false"
                class="el-link"
                type="primary"
                :underline="false"
                >删除</el-link
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码部分 -->
      <el-pagination
        class="block"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryinfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <TagAdd
      :dialogVisible="visible"
      @handleClose="TagAddClose"
      @handleOk="handleOk"
      :updateData="updateData"
    />
  </div>
</template>

<script>
import {
  list,
  simple,
  detail,
  add,
  update,
  remove,
  changeState,
} from "@/api/hmmm/tags";
import TagAdd from "../components/tags-add";
export default {
  components: {
    TagAdd,
  },
  data() {
    return {
      updateData: null,
      // 获取到的数据列表
      list: [],
      // 新增按钮对话框的隐藏
      visible: false,
      // 穿梭对话框的提示数据
      title: "",
      // 分页数据
      queryinfo: {
        // 表单搜索框绑定的数据
        tagName: "",
        // 当前页面显示条数
        pagesize: 5,
        // 当前显示第几页
        page: 1,
      },
      // 总页数
      total: 0,
      // 判断是否携带数据跳转到本页面
      isBack: false,
      // 记录点击的什么name跳转到本页面,然后修改面包屑
      jumpPage: "",
    };
  },
  created() {
    // 初始化实例之后获取数据
    this.getList();
    // console.log(1111, this.$route.query);
    if (this.$route.query.name && this.$route.query.id) {
      this.isBack = true;
      this.queryinfo.subjectID = this.$route.query.id;
      this.jumpPage = this.$route.query.name;
    } else {
      this.isBack = false;
      this.queryinfo.subjectID = null;
    }
  },
  methods: {
    // 获取页面数据
    async getList() {
      // 获取数据
      //
      const { data: res } = await list(this.queryinfo);
      console.log(res);
      // 把获取到的数据赋值给data里面的list保存
      this.list = res;
      // 把数据条数赋值给穿梭提示框
      this.title = res.items.length;
      // 把总条数赋值给data里面的total
      this.total = res.counts;
    },
    // 点击新增按钮触发事件
    add() {
      // 点击新增按钮让对话框显示
      this.visible = true;
      this.updateData = null;
    },
    // 当前页条数改变时会触发  监听pagesize改变
    handleCurrentChange(page) {
      // 一旦页面显示的条数发生变化, 立马把最新的页面数值给替换;
      this.queryinfo.page = page;
      // 一旦页码值发生改变,就要重新发起请求
      this.getList();
    },
    // 页码数改变时会触发(显示第几页)
    // 监听page事件
    handleSizeChange(newPage) {
      // 显示条数发生变化,把最新的显示条数覆盖掉
      this.queryinfo.pagesize = newPage;
      // 重新刷新列表;
      this.getList();
    },
    //关闭对话框
    TagAddClose() {
      // 点击新增按钮让对话框关闭
      this.visible = false;
    },
    handleOk() {
      this.TagAddClose();
      this.getList();
    },
    // 点击修改按钮触发
    updateFn(scope) {
      this.updateData = scope;
      this.visible = true;
    },
    // 点击删除按钮触发
    async tagDelete(bool, id) {
      if (bool) {
        const { data: res } = await remove({ id });
        this.getList();
        // 刷新列表
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      } else {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
    },
    // 点击搜索触发
    getListSearch() {
      // 刷新列表
      this.getList();
    },
    // 点击清除触发
    eliminate() {
      this.queryinfo.state = null;
      this.queryinfo.tagName = "";
      // 刷新列表
      this.getList();
    },
    //点击返回学科
    backFn() {
      this.$router.back();
      // window.history.back()
    },
  },
};
</script>

<style  scoped>
.right_btn {
  float: right;
}
.el-link {
  margin-left: 10px;
  margin-right: 10px;
}
.block {
  float: right;
  padding: 15px 0;
}
.text {
  margin-bottom: 10px;
}
.border {
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
  background-color: #ccc;
}
</style>

<style>
.vhu1 .span {
  float: right;
  color: rgb(64, 158, 255) !important;
  line-height: 35px;
  margin-right: 10px;
}
</style>

